<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>好友动态</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../css/friend.css">
    <script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/friend.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
        <div class="row">
            <div class="col-xs-4 ">
                <a href="#" class="a-color"><span class="glyphicon glyphicon-chevron-left"></span>动态</a>
            </div>
            <div class="col-xs-4">
                <label class="label-color">好友动态</label>
            </div>
            <div class="col-xs-4 text-right">
                <a href="#" class="a-color">写说说</a>
            </div>
        </div>
    </div>
</nav>
<div id="back-ground"></div>
<div id="user" class="container">
    <div class="row">
        <div class="col-xs-4">
            <img alt="image" class="img-circle" src="../images/a3.jpg">
        </div>
    </div>
    <div class="row">
        <div class="col-xs-10 col-xs-offset-3">
            <label class="label-color">王乐</label>
            <p>今天天气真好啊！我不想..............</p>
        </div>
    </div>
</div>
<div id="time" style="position: absolute;z-index: 5;background: url(../images/b2.png) center no-repeat;width: 100px;height: 50px;background-size: 100% 100%;opacity: 0.8;right: 0">
    <label id="labTime" style="color: #ffffff"><strong id="hour"></strong>:<strong id="minute"></strong></label>
    <label id="labDay" style="color: #ffffff"><strong>今天</strong></label>
</div>
<ul class="list-group">
    <li class="list-group-item">
        <div class="row">
            <div class="col-xs-2">
                <img alt="image" class="img-rounded" src="../images/a3.jpg">
            </div>
            <div class="col-xs-10">
                <div class="media-body ">
                    <p><strong class="strong-color">王老吉发表了说说</strong></p>
                    <div class="well">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                        Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                    </div>
                    <div class="text-right">
                        <a class="btn btn-xs  a-margin"><span class="glyphicon glyphicon-thumbs-up"></span> 赞</a>
                        <a class="btn btn-xs  a-margin"><span class="glyphicon glyphicon-comment"></span> 评论</a>
                    </div>
                    <div class="well" style="display: none">
                        <p><strong class="strong-color">name</strong>:<strong>xxxxxxxxxxxxxxxxxxxxxx</strong></p>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row">
            <div class="col-xs-2">
                <img alt="image" class="img-rounded" src="../images/a3.jpg">
            </div>
            <div class="col-xs-10">
                <div class="media-body ">
                    <p><strong class="strong-color">王老吉发表了说说</strong></p>
                    <div class="well">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                        Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                    </div>
                    <div class="text-right">
                        <a class="btn btn-xs  a-margin"><span class="glyphicon glyphicon-thumbs-up"></span> 赞</a>
                        <a class="btn btn-xs  a-margin"><span class="glyphicon glyphicon-comment"></span> 评论</a>
                    </div>
                    <div class="well" style="display: none">
                        <p><strong class="strong-color">name</strong>:<strong>xxxxxxxxxxxxxxxxxxxxxx</strong></p>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row">
            <div class="col-xs-2">
                <img alt="image" class="img-rounded" src="../images/a3.jpg">
            </div>
            <div class="col-xs-10">
                <div class="media-body ">
                    <p><strong class="strong-color">王老吉发表了说说</strong></p>
                    <div class="well">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                        Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                    </div>
                    <div class="text-right">
                        <a class="btn btn-xs  a-margin"><span class="glyphicon glyphicon-thumbs-up"></span> 赞</a>
                        <a class="btn btn-xs  a-margin"><span class="glyphicon glyphicon-comment"></span> 评论</a>
                    </div>
                    <div class="well" style="display: none">
                        <p><strong class="strong-color">name</strong>:<strong>xxxxxxxxxxxxxxxxxxxxxx</strong></p>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>
</body>
</html>